<template>
    <div>
        <h1>{{name}}</h1>
        <myjsx></myjsx>
        <!-- <my-button>自己的按钮</my-button>
        <my-button>自己的按钮</my-button>
        <my-button>自己的按钮</my-button>
        <my-button>自己的按钮</my-button>
        <my-button ref='btn'>自己的按钮1000</my-button>
        <my-button>自己的按钮</my-button>-->
        <my-button  ref='btn'>自己的按钮</my-button> 

        <my-input>
          <template slot='header' slot-scope="haha">
            <!-- haha 这个变量对应的 就是 子组件再 slot上写的所有行内属性 -->
            {{haha}}
            <span>这是我自己的标题</span>
            <span>这是我自己的标题</span>
            <span>这是我自己的标题</span>
          </template>
          
          <!-- <span slot='footer'>这是我自己的尾部</span> -->
          <!-- <template  v-slot:footer>
            <span>这是我自己的尾部123</span>
          </template> -->
          <template  #footer='haha'>
            {{haha}}
            <span>这是我自己的尾部666</span>
          </template>
          
        </my-input>
    </div>
</template>
<script>
// @ is an alias to /src
import button from './components/1_button'
import input from './components/2_input'
import myjsx  from './components/3_jsx'
export default {
    name: 'XXX',
    provide(){
      let obj = {};
      Object.defineProperty(obj,'qqq',{
        get:()=>{
          return this.name
        }
      })
      return {
        qqq:123,
        obj
      }
    },
    data() {
        return {
          name:"珠峰"
        }
    },
    created() {
      console.log(this)
    },
    mounted() {
      // this.$children[3].age = 1000
      this.$refs.btn.age = 1000
    },
    components: {
        "my-button":button,
        "my-input":input,
        myjsx
    }
}
</script>
<style lang="less">

</style>